<template>
  <el-card class="form-container" shadow="never">
    <el-form ref="newsFrom" :model="news" :rules="rules" label-width="150px" style="width: 680px">
      <el-form-item label="资讯标题：" prop="title">
        <el-input v-model="news.title" placeholder="请输入资讯标题"/>
      </el-form-item>
      <el-form-item label="资讯内容：" style="width:850px">
        <editor v-model="news.content"/>
      </el-form-item>
      <el-form-item label="资讯类型：" prop="type">
        <el-input v-model="news.type" placeholder="请输入资讯类型"/>
      </el-form-item>
      <el-form-item label="版本：" prop="version">
        <el-input v-model="news.version"/>
      </el-form-item>
      <el-form-item label="发布时间：" prop="publish_time">
        <!-- <el-date-picker
          v-model="news.publish_time"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="请选择时间"/> -->
        <el-input v-model="news.publish_time" placeholder="请输入发布时间"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('newsFrom')">提交</el-button>
        <el-button v-if="!newsId" @click="resetForm('newsFrom')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
import { createNews, getNews, updateNews } from '@/api/new'
import editor from '@/components/Editor/WangEditor'
const defaultNews = {
  id: 0,
  place_id: 0,
  title: '',
  content: '',
  type: 0,
  version: '',
  publish_time: ''
}
export default {
  name: 'AddNews',
  components: { editor },
  data() {
    return {
      place_id: parseInt(this.$route.query.placeId),
      newsId: parseInt(this.$route.query.newId),
      news: Object.assign({}, defaultNews),
      rules: {
        title: [
          { required: true, message: '请输入资讯标题', trigger: 'blur' },
          { min: 1, max: 200, message: '长度在 200 个字符以内', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入资讯内容', trigger: 'blur' },
          { min: 0, max: 20, message: '长度在 200 个字符以内', trigger: 'blur' }
        ],
        version: [
          { min: 1, max: 200, message: '长度在 20 个字符以内', trigger: 'blur' }
        ],

        sort: [
          { type: 'number', message: '排序必须为数字' }
        ]
      }
    }
  },
  created() {
    if (this.newsId) {
      getNews(this.newsId).then(response => {
        this.news = response.data.data
      })
    } else {
      this.news = Object.assign({}, defaultNews)
    }
  },
  methods: {
    onSubmit(formName) {
      this.news.place_id = this.place_id
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.newsId) {
            this.news.id = this.newsId
            updateNews(this.news).then(response => {
              this.$refs[formName].resetFields()
              this.$message({
                message: '修改成功',
                type: 'success',
                duration: 1000
              })
              this.$router.back()
            })
          } else {
            createNews(this.news).then(response => {
              this.$refs[formName].resetFields()
              this.brand = Object.assign({}, defaultNews)
              this.$message({
                message: '创建成功',
                type: 'success',
                duration: 1000
              })
              this.$router.back()
            })
          }
        } else {
          this.$message({
            message: '验证失败',
            type: 'error',
            duration: 1000
          })
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.brand = Object.assign({}, defaultNews)
    }
  }
}
</script>
<style>
</style>

